<template>
  <el-dialog
    top="30px"
    width="900px"
    append-to-body
    title="编辑个人/企业不动产信息"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-button @click="handlerEdit()" type="primary" class="btn-long mb-2">
      <i class="fa fa-plus"></i>
      新增信息
    </el-button>
    <table class="table table-bordered table-sm bg-white table-vertical-middle text-center">
      <colgroup>
        <col width="16%" />
        <col width="20%" />
        <col width="12%" />
        <col width="18%" />
        <col width="22%" />
        <col width="12%" />
      </colgroup>
      <tr>
        <td>资产名称</td>
        <td>资产地址</td>
        <td>权利人</td>
        <td>是否有证</td>
        <td>购买金额</td>
        <td>操作</td>
      </tr>
      <tr v-for="p of immov" :key="p.id">
        <td>{{ p.immov_name || '-' }}</td>
        <td>{{ p.immov_address || '-' }}</td>
        <td>{{ p.own_person || '-' }}</td>
        <td>{{ +(p.is_cert || 0) === 1 ? '是' : '否' }}</td>
        <td>{{ p.buy_funds || '-' }} 万元</td>
        <td>
          <el-button class="td-inner-btn" type="text" @click="handlerEdit(p)">
            <i class="fa fa-edit"></i>
          </el-button>
          <el-button class="td-inner-btn text-danger" type="text" @click="deleteData(p.id)">
            <i class="fa fa-trash"></i>
          </el-button>
        </td>
      </tr>
      <tr>
        <td>资产价值</td>
        <td colspan="3">-</td>
        <td colspan="2">{{ immovFunds || '-' }} 万元</td>
      </tr>
      <tr v-show="!immov.length">
        <td class="text-center p-3 text-muted" colspan="6">暂无数据</td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="5" class="report-input-td">
          <el-input
            type="textarea"
            v-model="hotel.remark_immov"
            placeholder="备注"
            :rows="3"
          ></el-input>
        </td>
      </tr>
    </table>
    <div class="text-center mt-5">
      <el-button type="primary" class="btn-long" :loading="saveLoading" @click="handleConfirm">
        保存备注
      </el-button>
      <el-button class="btn-long" :loading="saveLoading" @click="beforeClose">取消</el-button>
    </div>

    <c-form-dialog
      ref="form"
      :visible.sync="editVisible"
      :form-items="formItems"
      :form-data="editData"
      :table-name="immovTable"
      :table-id="tableId"
      @close="handleClose"
      @success="handlerSuccess"
      :before-save="handleBeforeSave"
    ></c-form-dialog>
  </el-dialog>
</template>

<script>
import { add } from '@vimi/utils-tool'
export default {
  components: {},
  props: {
    visible: Boolean,
    formData: { type: Array, default: () => [] },
    hotelData: { type: Object, default: () => {} },
    queryId: String,
  },
  data() {
    return {
      immov: [],
      immovTable: 'credit_industrial_immov',
      saveLoading: false,
      tableId: '',
      editData: {},
      editVisible: false,
      formItems: [
        {
          tag: 'input',
          itemAttrs: {
            label: '资产名称',
            rules: [{ required: true, message: '请输入资产名称', trigger: 'blur' }],
          },
          attrs: { key: 'immov_name', value: '', placeholder: '请输入资产名称' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '购买金额',
            rules: [{ required: true, message: '请输入购买金额', trigger: 'blur' }],
          },
          attrs: { key: 'buy_funds', value: '' },
          tagSlots: [{ name: 'append', slot: '万元' }],
          directives: [
            {
              name: 'input-number',
              value: {
                min: 0,
                fixed: 2,
              },
            },
          ],
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '权利人',
          },
          attrs: { key: 'own_person', value: '', placeholder: '请输入权利人' },
        },
        {
          tag: 'radio-group',
          itemAttrs: { label: '是否有证' },
          attrs: {
            clearable: false,
            key: 'is_cert',
            value: '0',
            options: {
              1: '是',
              0: '否',
            },
          },
        },
        {
          tag: 'textarea',
          itemAttrs: {
            label: '资产地址',
          },
          attrs: { key: 'immov_address', value: '', placeholder: '资产地址' },
        },
      ],
      hotelTable: 'credit_industrial_hotel_invest',
      hotel: {},
    }
  },
  computed: {
    immovFunds() {
      let funds = 0
      this.immov.forEach(item => {
        funds = add(funds, item.buy_funds)
      })
      return funds
    },
  },
  watch: {
    formData: {
      handler: function () {
        this.immov = this.formData.map(item => {
          return { ...item }
        })
      },
      immediate: true,
      deep: true,
    },
    hotelData: {
      handler: function () {
        this.hotel = { ...this.hotelData }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleConfirm() {
      if (!this.hotel.id) {
        return
      }
      this.saveLoading = true
      this.$api
        .updateData(this.$serviceName, this.hotelTable, this.hotel.id, this.hotel)
        .then(() => {
          this.$message.success('保存成功')
          this.$emit('getRemark', true)
          this.beforeClose()
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '保存失败，请重试！')
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    handleBeforeSave(model) {
      model.customer_related_id = this.queryId
      return model
    },
    handleClose() {
      this.editVisible = false
    },
    handlerEdit(p = {}) {
      this.tableId = p.id || ''
      this.editData = { ...p }
      this.editVisible = true
    },
    deleteData(id) {
      this.$utils
        .msgbox({
          message: `确定删除?`,
          type: 'warning',
          beforeClose: () => this.$api.deleteData(this.$serviceName, this.immovTable, id),
        })
        .then(() => {
          this.handlerSuccess()
          this.$message.success('删除成功！')
        })
        .catch(err => this.$message.error(err?.data?.error_description || '请求失败，请重试！'))
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handlerSuccess() {
      this.$emit('success', true)
    },
  },
}
</script>

<style lang="scss" scoped>
.report-input-td {
  background-color: #ffffee;
}
</style>
